<template>
	<view class="login">
		<image src="https://ftp.bmp.ovh/imgs/2021/05/3ebda57d5f9cb494.png" mode="aspectFit"></image>
		<!-- <view class="login-box">
			<text class="login-title">登录</text>

			<view class='searchItem'>
				<image
					src='' />
				<input placeholder='输入你的手机号'></input>
			</view>

			<view class='searchItem'>
				<image
					src='' />
				<input placeholder='请输入验证码'></input>
				<button type="default">获取验证码</button>
			</view>

			<text class="login-pwd">找回密码</text>

			<button class="submit" type="default" @click="changeLogin">登录</button>

		</view> -->

		<!-- <button class="submit" type="default" open-type="onGetPhoneNumber" withCredentials="true" lang="zh_CN"
			@getphonenumber="onGetPhoneNumber">授权登录</button> -->

		<button class="submit" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">授权登录</button>
	</view>
</template>
<script>
	import WXBizDataCrypt from "@/common/WXBizDataCrypt.js";
	export default {
		data() {
			return {
				token: uni.getStorageSync('token'),
				openid: '',
				session_key: '',
				mobile: ''
			};
		},
		methods: {
			onGetPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
					//用户决绝授权 
				} else {
					let pc = new WXBizDataCrypt('wx4159281e5a940fc2', this.session_key);
					let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
					this.mobile = data.phoneNumber
					this.mylogin()
				}
			},
			mylogin(){
				uni.request({
					url: this.$baseUrl + '/api/wechat/login',
					method: 'POST',
					data: {
						openid: this.openid,
						mobile:this.mobile,
					},
					success: (cts) => {
						console.log(cts)
						if(cts.data.code!=1){
							uni.showToast({
								title: cts.data.msg,
								icon: 'none'
							});
						}else{
							uni.setStorageSync('token', cts.data.data.token);
							uni.redirectTo({
							    url: '/pages/top/index'
							});
						}
					}
				});
			},
			checkToken(){
				uni.request({
					url: this.$baseUrl + '/api/token/check',
					method: 'GET',
					header:{
						token:this.token
					},
					success: (res) => {
						if(res.data.code==401){
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
							return
						}
						uni.redirectTo({
						    url: '/pages/top/index'
						});
					}
				});
			}
		},
		onLoad() {
			wx.login({
				success: (res) => {
					if (res.code) {
						let _this = this
						uni.request({
							url: _this.$baseUrl + '/api/wechat/auth',
							method: 'POST',
							data: {
								code: res.code
							},
							success: (cts) => {
								const {
									openid,
									session_key
								} = cts.data.data
								this.openid = openid //openid 用户唯一标识  
								this.session_key = session_key //session_key  会话密钥  
							}
						});
					} else {
						console.log('登录失败！' + res.errMsg)
					}
				}
			})
			
			if(this.token){
				this.checkToken()
			}
		}
	}
</script>
<style scoped>
	page {
		background-image: url("https://i.bmp.ovh/imgs/2021/05/89b47c43ba1b30f4.png");
		background-size: 100% 100%;
	}

	.login-box {
		position: absolute;
		width: 650rpx;
		height: 510rpx;
		background-color: #FFFFFF;
		left: 50%;
		transform: translate(-50%, 0%);
	}


	.login-title {
		margin: 49rpx;
		font-size: 48rpx;
		font-weight: 400;
		color: #3E4A59;
	}

	.login-pwd {
		position: absolute;
		right: 0;
		margin-top: 19rpx;
		margin-right: 50rpx;
		width: 106rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #E4615C;
		line-height: 34rpx;
	}

	/* .submit {
		position: absolute;
		bottom: -40rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 479rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #DE272C, #F35448);
		border-radius: 40rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #FEFEFE !important;
	} */

	.submit {
		width: 479rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #DE272C, #F35448);
		border-radius: 40rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #FEFEFE !important;
	}

	view.searchItem {
		display: flex;
		margin-left: 29rpx;
		width: 590rpx;
		height: 120rpx;
		border-bottom: 2px solid #D3DFEF;
	}

	view.searchItem image {
		height: 36rpx;
		width: 22rpx;
		align-self: center;
		margin-left: 50rpx;
		margin-right: 45rpx;
	}

	view.searchItem input {
		flex: 1;
		align-self: center;
		font-size: 24rpx;
	}

	view.searchItem button {
		align-self: center;
		width: 184rpx;
		height: 47rpx;
		background: #E4615C;
		border-radius: 23rpx;
		line-height: 47rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #F2F2F2;
	}
</style>
